<include file="Public:header" />

<head>
    <link rel="stylesheet" type="text/css" href="Public/Mobile/css/Normalize.css">
    <link rel="stylesheet" type="text/css" href="Public/Mobile/css/gamenav.css">
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: black;
}

.wraper {
    position: relative;

}

.loading {
    position: absolute;
    top: 141px;
    width: 20px;
    height: 20px;
    z-index: 1;
}


/*设置主页下的三个模块*/

.wraper > div {
    width: 100%;
    float: left;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

button {
    position: absolute;
    width: 30%;
    height: 3%;
    top: 61%;
    left: 37%;
}

.content2,
.content3,
.content4,
.content5 {
    position: relative;
}

.enter1-game {
    position: absolute;
    display: block;
    width: 32%;
    height: 8%;
    top: 24%;
    left: 36%;
    background: url(./Public/Mobile/new/images/games/main/anniu_lijibaoming.png) round;
}

.enter1-game:active {
    background: url(./Public/Mobile/new/images/games/main/anniu1_lijibaoming.png) round;
}

.enter2-game {
    position: absolute;
    display: block;
    width: 30%;
    height: 19.7%;
    top: 56.8%;
    left: 65.5%;
    background: url(./Public/Mobile/new/images/games/main/anniu_saichengxiangqing.png) round;
}

.enter2-game:active {
    background: url(./Public/Mobile/new/images/games/main/anniu1_saichengxiangqing.png) round;
}

.enter3-game {
    position: absolute;
    display: block;
    width: 25%;
    height: 7%;
    top: 91.2%;
    left: 38%;
    background: url(./Public/Mobile/new/images/games/main/anniu_chakanxiangqing.png) round;
}

.enter3-game:active {
    background: url(./Public/Mobile/new/images/games/main/anniu1_chakanxiangqing.png) round;
}


/*支持单位*/

.support {
    position: absolute;
    top: 52%;
    left: 15%;
}

.support a {
    font-size: 10px;
    color: rgb(96, 97, 97);
    font-family: 幼圆;
    font-weight: 800;
}


/*页面的滑动*/
</style>

<body>
    <div class="wraper">
        <!-- 加载loading -->
        <div class="loading" id="loader">
        </div>
        <!-- 导航栏 -->
        <include file="Public:gheader" />
        <script type="text/javascript"></script>
        <!-- 主页内容头部 -->
        <div class="header">
            <img src="./Public/Mobile/new/images/games/main/tu1.jpg">
        </div>
        <!-- 主页内容 -->
        <div class="content1">
            <img src="./Public/Mobile/new/images/games/main/tu2.jpg">
        </div>
        <div class="content2">
            <img src="./Public/Mobile/new/images/games/main/tu3.jpg">
            <a class="enter1-game"></a>
        </div>
        <div class="content3">
            <img src="./Public/Mobile/new/images/games/main/tu4.jpg">
            <a class="enter2-game" href="{:U('Index/lolrace')}"></a>
        </div>
        <div class="content4">
            <img src="./Public/Mobile/new/images/games/main/tu5.jpg">
            <a class="enter3-game" href="{:U('Index/lolrace')}"></a>
        </div>
        <div class="content5" style="margin-bottom:5rem;">
            <img src="./Public/Mobile/new/images/games/main/tu6.jpg">
            <div class="support">
                <a href="#">西安市十六所高校社团（详情）</a>
                <a href="#">西安市十六家电竞网咖（详情）</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $('.enter1-game').click(function() {
        $(".wraper").animate({
            left: "-100%"
        }, 300, function() {
            window.location.href = "{:U('Index/lolteams')}";
        })
    })
    $(function() {
        $('#loader').shCircleLoader();
    })
    </script>
</body>
<include file="Public:footer" />
